<template>
	<view class="city_recruit">
		<view class="banner">
			<image :src="bannerUrl" mode="widthFix"></image>
		</view>
		<view class="form">
			<view class="city" @click="pickerShow = true">
				<view class="title">
					城市
				</view>
				<fui-list marginTop="20" :topBorder="false">
					<fui-list-cell radius="20upx" marginBottom="20" background="#eee" :topBorder="false" :bottomBorder="false" :highlight="false" arrow>
						{{city || '请选择意向合作城市'}}
					</fui-list-cell>
				</fui-list>
			</view>
			<view class="user">
				<view class="title">
					联系人姓名
				</view>
				<fui-input 
					v-model="name"
					backgroundColor="#eee" 
					placeholderStyle="color:rgba(0,0,0,.5);font-size:13px;"
					color="color:rgba(0,0,0,.5)"
					size="28"
					:borderTop="false" 
					:borderBottom="false" 
					label="" 
					placeholder="请输入">
					<view class="sex">
						<view class="" :class="[{'active':sexIndex == 1}]" @click=" sexIndex = 1">
							先生
						</view>
						<view class="" :class="[{'active':sexIndex == 2}]" @click=" sexIndex = 2">
							女士
						</view>
					</view>
				</fui-input>
			</view>
			<view class="phone">
				<view class="title">
					联系电话
				</view>
				<fui-input
					v-model="phone"
					backgroundColor="#eee" 
					placeholderStyle="color:rgba(0,0,0,.5);font-size:13px;"
					color="color:rgba(0,0,0,.5)"
					size="28"
					:borderTop="false" 
					:borderBottom="false" 
					label="" 
					placeholder="请输入">
				</fui-input>
			</view>
			<view class="code">
				<view class="title">
					验证码
				</view>
				<fui-input
					v-model="code"
					backgroundColor="#eee" 
					placeholderStyle="color:rgba(0,0,0,.5);font-size:13px;"
					color="color:rgba(0,0,0,.5)"
					size="28"
					:borderTop="false" 
					:borderBottom="false" 
					label="" 
					placeholder="请输入">
					<view class="get_code" v-if="code_flag" @click="getCode">
						{{code_text}}
					</view>
					<view class="get_code" v-else>
						{{`${code_time}秒后重新获取`}}
					</view>
				</fui-input>
			</view>
			<view class="tips">
				我司收到您的合作意向后会第一时间与您联系
			</view>
		</view>
		<view class="submit" @click="submit">
			<view class="buttons" >
				提交
			</view>
		</view>
		<fui-picker :options="cityList" :linkage="true" :show="pickerShow" @change="pickerChange" @cancel="pickerCancel"></fui-picker>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'',
				phone:'',
				sexIndex:1,
				code:'',
				city:'',
				city_id:'',
				cityList:[],
				pickerShow:false,
				code_flag:true,
				code_text:'获取验证码',
				code_time:60,
				timer:null,
				bannerUrl:'',	//顶部banner
				
			};
		},
		onLoad() {
			this.getCityList()
			this.getBanner()
		},
		methods:{
			getBanner(){
				this.$http({
					url:'/api/config',
					method:'get',
					success:result=>{
					console.log(result,'--------------------config')
						this.bannerUrl = result.data.banner_city
					}
				})
			},
			pickerChange(e){
				console.log(e)
				this.city = e.text 
				this.city_id = e.value
				this.pickerCancel()
			},
			pickerCancel(){
				this.pickerShow = false;
			},
			//获取城市列表
			getCityList() {
				this.$http({
					url: '/api/city_list',
					method: 'get',
					success: result => {
						console.log(result, '-------------------城市列表')
						result.data.list.forEach((item,index)=>{
							item.text = item.name
							item.value = item.id
						})
						this.cityList = result.data.list
					}
				})
			},
			//获取验证码
			getCode(){
				if(this.phone == ''){
					uni.showToast({
						title:'请填写手机号',
						icon:'none'
					})
					return false;
				}
				this.$http({
					url:'/api/get_code',
					method:'post',
					data:{
						phone:this.phone,
						type:'city_cooperation'
					},
					success:result=>{
						console.log(result)
						if(result.code == 200){
							this.code_flag = false;
							if(this.timer != null){
								clearInterval(this.timer)
							}else{
								this.timer = setInterval(()=>{
									this.code_time--
									if(this.code_time <= 0){
										clearInterval(this.timer)
										this.code_time = 60
										this.code_flag = true;
									}
								},1000)
							}
						}
					}
				})
			},
			//提交
			submit(){
				if(this.city_id == ''){
					uni.showToast({
						title:'请选择意向合作城市',
						icon:'none'
					})
					return false;
				}
				if(this.name == ''){
					uni.showToast({
						title:'请输入联系人',
						icon:'none'
					})
					return false;
				}
				if(this.phone == ''){
					uni.showToast({
						title:'请输入联系电话',
						icon:'none'
					})
					return false;
				}
				if(this.code == ''){
					uni.showToast({
						title:'请输入验证码',
						icon:'none'
					})
					return false;
				}
				this.$http({
					url:'/api/city_cooperation',
					method:'post',
					data:{
						city_id:this.city_id,
						name:this.name,
						phone:this.phone,
						sex:this.sexIndex,
						code:this.code,
					},
					success:result=>{
						console.log(result)
						uni.showToast({ 
							title:result.msg
						})
						setTimeout(()=>{
							uni.navigateBack()
						},2000)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		width: 100%;
		height: 100%;
	}
	.city_recruit{
		width: 100%;
		height: 100%;
		background-color: #fff;
		.banner{
			width: 100%;
			>image{
				width: 100%;
			}
		}
		.form{
			padding: 40upx;
			>view{
				.title{
					font-size: 36upx;
					font-weight: bold;
				}
				.sex{
					display: flex;
					align-items: center;
					>view{
						padding: 15upx 30upx;
						margin: 0 10upx;
					}
					>.active{
						background-color: #47A378;
						color: #fff;
					}
				}
				.get_code{
					padding: 0 25upx;
					color: #47A378;
				}
			}
			.tips{
				text-align: center;
				font-size: 28upx;
				color: rgba(0,0,0,.5);
			}
		}
		.submit{
			width: 100%;
			padding: 20upx 0;
			background-color: #fff;
			position: fixed;
			bottom:0;
			left: 0;
			.buttons{
				width:90%;
				margin: 0 5%;
				padding: 25upx 0;
				text-align: center;
				background-color: #47A378;
				border-radius: 40upx;
				color: #fff;
			}
		}
	}
	/deep/.fui-input__wrap{
		border-radius: 20upx;
		margin: 20upx 0;
	}
	/deep/.fui-list__cell{
		color: rgba(0,0,0,.5);
	}
	/deep/.uni-input-input{
		color: rgba(0,0,0,.5);
	}
</style>
